<template>
  <div class="list">
    <x-data-table
      v-if="getProps.productIdList.length > 0"
      ref="tableRef"
      v-model:immediate="immediate"
      :params="paginationParams"
      :size="10"
      :columns="columns"
      :row-key="(row) => row.id"
      :toolbar="false"
    />

    <n-empty v-else description="无商品" />
  </div>
</template>

<script setup lang="ts">
  import { XButton, XDataTable } from '@/components'
  import { computed, h, reactive, ref, VNode, watch } from 'vue'
  import { GiftListModel } from '@/api/model/productModel'
  import ProductInfo from '@/views/product/gift/ProductInfo.vue'
  import { NSpace, NText, NEmpty } from 'naive-ui'

  const props = defineProps({
    productIdList: {
      type: Array,
      default: () => []
    },
    editable: {
      type: Boolean,
      default: false
    }
  })

  const emits = defineEmits(['delete'])
  const getProps = reactive(props)
  watch(
    () => getProps.productIdList,
    (val) => {
      immediate.value = true
    },
    {
      deep: true
    }
  )
  const immediate = ref(true)
  const paginationParams = computed(() => {
    return {
      actions: 'product/giftList',
      data: {
        giveawayIdList: props.productIdList
      }
    }
  })

  const columns = reactive([
    {
      key: 'PageInfo',
      title: '商品',
      width: 300,
      render(row: GiftListModel): VNode {
        return h(ProductInfo, {
          detail: row
        })
      }
    },
    {
      key: 'giveawayPrice',
      title: '当前价格',
      render(row: GiftListModel): VNode {
        return h(NSpace, () => h(NText, () => `¥ ${row.giveawayPrice}`))
      }
    },
    ...(props.editable
      ? [
          {
            key: 'action',
            title: '操作',
            render(row: GiftListModel): VNode {
              return h(XButton, { type: 'error', text: true, onClick: () => handleDelete(row) }, () => '删除')
            }
          }
        ]
      : [])
  ])

  function handleDelete(row: GiftListModel) {
    emits('delete', row.id)
  }
</script>

<style scoped lang="scss"></style>
